<template>
	<div id="container">
		<!-- 下拉菜单 -->
		<el-dropdown
			:class="isChosen == true ? 'chosen' : ''"
			trigger="click"
			@command="handleCommand"
		>
			<span class="el-dropdown-link title">
				事件更新
				<i class="el-icon-arrow-down el-icon--right"></i>
			</span>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item command="on">
					<img src="img/更新.png" alt="" />
					激活更新
				</el-dropdown-item>
				<el-dropdown-item command="off">
					<img src="img/关闭_操作_jurassic.png" alt="" />
					关闭更新
				</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
		<!-- 更新弹窗 -->
		<el-dialog
			title="事件更新"
			v-el-drag-dialog
			:modal="false"
			:visible.sync="dialogFormVisible"
			:close-on-click-modal="false"
			:before-close="cancelUpdate"
			width="350px"
		>
			<el-form
				:model="form"
				:rules="rules"
				ref="form"
				label-width="80px"
				size="mini"
			>
				<el-form-item label="事件编号" prop="SJid">
					<el-input v-model="form.SJid"></el-input>
				</el-form-item>
				<el-form-item label="事件类型" prop="type">
					<el-select v-model="form.type" placeholder="请选择事件类型">
						<el-option label="碰撞" value="碰撞"></el-option>
						<el-option label="刮擦" value="刮擦"></el-option>
						<el-option label="失火" value="失火"></el-option>
						<el-option label="翻车" value="翻车"></el-option>
						<el-option label="碾压" value="碾压"></el-option>
						<el-option label="其它" value="其它"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="事件等级" prop="level">
					<el-select v-model="form.level" placeholder="请选择事件等级">
						<el-option label="轻微事故" value="0"></el-option>
						<el-option label="一般事故" value="1"></el-option>
						<el-option label="重大事故" value="2"></el-option>
						<el-option label="特大事故" value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="发生时间" prop="datetime">
					<el-date-picker
						v-model="form.datetime"
						value-format="yyyy.M.d H:m:s"
						type="datetime"
						placeholder="选择日期时间"
						:picker-options="pickerOptions"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="事件地址" prop="address">
					<el-input v-model="form.address"></el-input>
				</el-form-item>
				<el-form-item label="车辆牌号" prop="number">
					<el-input v-model="form.number"></el-input>
				</el-form-item>
				<el-form-item label="司机名字" prop="user">
					<el-input v-model="form.user"></el-input>
				</el-form-item>
				<el-form-item label="审核状态" prop="level">
					<el-select v-model="form.statu" placeholder="请选择审核状态">
						<el-option label="待处理" value="0"></el-option>
						<el-option label="处理中" value="1"></el-option>
						<el-option label="已归档" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button @click.stop="cancelUpdate">取 消</el-button>
					<el-button type="primary" @click.stop="submit('form')">
						确 定
					</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
// 定义全局变量
var map;
var source;
var draw;
var layer;
var docLayer;
var position;
var layerHighlight; //更新点位高亮显示图层

import { createDraw } from '../../../utils/Draw.js'; //导入创建画笔函数
import { queryPoint } from '../../../utils/queryPoint.js'; //导入点查询
import elDragDialog from '../../directive/el-dragDialog'; //导入自定义弹窗拖拽
import { mapState } from 'vuex';
import { Flag } from '@icon-park/vue';
export default {
	directives: {
		// 自定义拖拽弹窗配置
		elDragDialog,
	},
	data() {
		return {
			isChosen: false, //是否激活更新事件菜单
			FID: '',
			position_update: [],
			addValue: [],
			dialogFormVisible: false, //控制弹窗
			// 表单数据
			form: {
				SJid: '',
				type: '',
				level: '',
				datetime: '',
				address: '',
				number: '',
				user: '',
				statu: '',
			},
			formLabelWidth: '150px',
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() > new Date().getTime();
				},
			},
			// 表单校验
			rules: {
				SJid: [
					{ required: true, message: '请输入编号', trigger: 'blur' },
					{
						message: '请输入编号',
						trigger: 'blur',
					},
				],
				type: [
					{ required: true, message: '请选择事件类型', trigger: 'change' },
				],
				level: [
					{
						required: true,
						message: '请选择事件等级',
						trigger: 'change',
					},
				],
				address: [
					{ required: true, message: '请填写活动形式', trigger: 'blur' },
				],
				datetime: [
					{
						// validator: checkTime,
						required: true,
						message: '请选择日期',
						trigger: 'change',
					},
				],
				number: [{ required: true, message: '请填写车牌号', trigger: 'blur' }],
				user: [
					{ required: true, message: '请填写驾驶员名字', trigger: 'blur' },
				],
			},
		};
	},
	computed: {
		...mapState(['map', 'docLayer']),
	},
	methods: {
		// 激活与关闭更新事件菜单
		handleCommand(command) {
			if (command == 'on') {
				this.activeMap(); //激活点击地图事件
				this.isChosen = true; //激活菜单样式
			} else {
				// console.log('关闭了');
				this.removeUpdateEventDraw(); //移除画笔
				this.isChosen = false; //关闭菜单样式
			}
		},
		// 激活地图点击事件
		activeMap() {
			map = this.map;
			docLayer = this.docLayer;
			map.on('click', this.handleMap);
			/* 2、成功查询mapgis点要素 */
		},
		handleMap(e) {
			// 获取坐标
			var position = e.coordinate;
			console.log(position);
			var service = {
				name: docLayer.name,
				layerId: 2, //事件在第2图层，从第0图层开始数
			};
			// console.log(position);//输出点击事件获取的坐标
			// --------------------------------------根据点坐标获取点要素----------------------------
			//1、创建一个用于查询的点形状
			let pointObj = new Zondy.Object.Point2D(position[0], position[1]);
			//设置查询点的搜索半径,不能设置太大
			pointObj.nearDis = 0.001; //设置查询半径很重要，太小都会影响查询
			//2、初始化查询结构对象，设置查询结构包含几何信息
			var queryStruct = new Zondy.Service.QueryFeatureStruct();
			//是否包含几何图形信息
			queryStruct.IncludeGeometry = true;
			//是否包含图形显示参数
			queryStruct.IncludeWebGraphic = true;
			//3、指定查询规则
			var rule = new Zondy.Service.QueryFeatureRule({
				//是否将要素的可见性计算在内
				EnableDisplayCondition: false,
				//是否完全包含
				MustInside: false,
				//是否仅比较要素的外包矩形
				CompareRectOnly: false,
				//是否相交
				Intersect: true,
			});
			//4、实例化查询参数对象
			var queryParam = new Zondy.Service.QueryParameter({
				geometry: pointObj,
				resultFormat: 'json',
				struct: queryStruct,
				rule: rule,
			});
			//设置查询分页号
			queryParam.pageIndex = 0;
			//设置查询要素数目为1个
			queryParam.recordNumber = 1;
			//5、实例化地图文档查询服务对象
			var queryService = new Zondy.Service.QueryDocFeature(
				queryParam,
				docLayer.name,
				2,
				{
					ip: 'localhost',
					port: '6163', //访问IGServer的端口号，.net版为6163，Java版为8089
				}
			);
			//执行查询操作，onSuccess为查询回调函数
			queryService.query(this.onSuccess);
			// -----------------------------------------------------------------------------------------------
		},
		// 成功回调
		onSuccess(e) {
			// console.log(e);
			if (e.TotalCount == 0) {
				this.$message.warning('区域不存在事件');
				return;
			}

			//初始化Zondy.Format.PolygonJSON类
			var format = new Zondy.Format.PolygonJSON();
			//将MapGIS要素JSON反序列化为ol.Feature类型数组
			var features = format.read(e);
			console.log('features', features);
			// 将查询到的点高亮显示
			let sourceHighlight = new ol.source.Vector({
				wrapX: false,
			});
			// 点击对应的事件高亮显示
			sourceHighlight.addFeatures(features);
			layerHighlight = new ol.layer.Vector({
				source: sourceHighlight,
				style: new ol.style.Style({
					image: new ol.style.Icon({
						// offset:[0,10],
						//图标缩放比例
						scale: 0.8,
						//透明度
						opacity: 1,
						//图标的url
						src: '../../../src/assets/img/更新定位.png',
					}),
				}),
			});
			map.addLayer(layerHighlight);
			//获取表单数据
			console.log(e.SFEleArray[0]);
			this.FID = e.SFEleArray[0].FID;

			if (this.position_update.length > 0) {
				this.position_update.length = [];
			}
			this.position_update.push(e.SFEleArray[0].bound.xmax);
			this.position_update.push(e.SFEleArray[0].bound.ymax);
			var arr = e.SFEleArray[0].AttValue.slice(0, 8);
			(this.form.SJid = arr[0]),
				(this.form.type = arr[1]),
				(this.form.level = arr[2]),
				(this.form.datetime = arr[3]),
				(this.form.address = arr[4]),
				(this.form.number = arr[5]),
				(this.form.user = arr[6]),
				(this.form.statu = arr[7]),
				(this.dialogFormVisible = true);
		},

		submit(formName) {
			this.$refs[formName].validate((valid) => {
				// console.log('valid', valid);
				if (valid) {
				} else {
					return false;
				}
				this.dialogFormVisible = false;
			});
			var that = this;
			var gpoint = new Zondy.Object.GPoint(
				that.position_update[0],
				that.position_update[1]
			);
			//设置当前点要素的几何信息
			var fGeom = new Zondy.Object.FeatureGeometry({ PntGeom: [gpoint] });
			//描述点要素的符号参数信息
			var pointInfo = this.addPointStyle(this.form.statu); //判断状态赋予不同的样式
			//设置当前点要素的图形参数信息
			var webGraphicInfo = new Zondy.Object.WebGraphicsInfo({
				InfoType: 1,
				PntInfo: pointInfo,
			});
			var update_Value = [];
			for (var value in that.form) {
				update_Value.push(that.form[value]);
			}
			//设置添加点要素的属性信息

			// console.log(update_Value);
			var attValue = update_Value;
			//创建一个要素
			var newfeature = new Zondy.Object.Feature({
				fGeom: fGeom,
				GraphicInfo: webGraphicInfo,
				AttValue: attValue,
			});
			//设置要素为点要素
			newfeature.setFType(1);
			// *************************更新
			newfeature.setFID(that.FID);
			//创建一个要素数据集
			var featureSet = new Zondy.Object.FeatureSet();
			featureSet.clear();
			//设置属性结构
			var cAttStruct = new Zondy.Object.CAttStruct({
				FldName: [
					'事件编号',
					'事件类型',
					'事件等级',
					'发生时间',
					'发生地点',
					'车牌号',
					'驾驶员',
					'处理状态',
				],
				FldNumber: 8,
				FldType: [
					'string',
					'string',
					'int',
					'string',
					'string',
					'string',
					'string',
					'int',
				],
			});
			featureSet.AttStruct = cAttStruct;
			// console.log(featureSet);
			//添加要素到要素数据集
			featureSet.addFeature(newfeature);
			var editService = new Zondy.Service.EditDocFeature('guanggu', 2, {
				ip: 'localhost',
				port: '6163', //访问IGServer的端口号，.net版为6163，Java版为8089
			});
			//执行添加点要素功能
			editService.update(featureSet, this.onPntSuccess);
		},

		// -------------------------点要素的符号参数信息函数-----------------------------------
		addPointStyle(sloveType) {
			// sloveTyp代表处理状态，0为未处理，1为处理中，2 为已归档
			let Color = '';
			if (sloveType == 0) {
				Color = 6;
			} else if (sloveType == 1) {
				Color = 4;
			} else {
				Color = 90;
			}
			let pointInfo = new Zondy.Object.CPointInfo({
				Angle: 0,
				Color: Color,
				Space: 0,
				SymHeight: 5,
				SymID: 21, //子图号 都是默认的
				SymWidth: 5,
			});
			return pointInfo;
		},
		//添加点要素回调函数
		onPntSuccess(data) {
			if (data.succeed) {
				this.$message.success('更新事件成功');
				docLayer.refresh();
				map.removeLayer(layerHighlight); //移除更新点位高亮图层
			} else {
				this.$message.error('更新事件失败');
			}
		},
		// 取消事件更新
		cancelUpdate() {
			this.dialogFormVisible = false;
			this.$message.warning('已取消事件更新');
			map.removeLayer(layerHighlight); //移除更新点位高亮图层
		},
		removeUpdateEventDraw() {
			map.un('click', this.handleMap); //移除地图点击事件
			map.removeLayer(layerHighlight); //移除更新点位高亮图层
		},
	},
};
</script>

<style scoped>
.chosen {
	/* 激活菜单显示的样式 */
	background-color: antiquewhite !important;
	color: darkcyan !important;
}
/* 下拉菜单样式 */
.el-dropdown {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 5px;
	z-index: 11;
	border-radius: 10px;
	border-bottom: 2px solid white;
	font-size: 16px;
	font-weight: 500;
	background-color: rgba(248, 248, 132, 0.7);
}
.title {
	font-size: 18px;
}
.el-dropdown:hover {
	cursor: pointer;
	font-weight: 900;
	background-color: antiquewhite;
	color: darkcyan;
	box-shadow: 1px 1px 0px 0px;
	transition: all 0.2s ease-in-out;
}
</style>
